<template>
  <div class="tabsBox">
    <el-tabs ref="mytabs" v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="当日生产进度" name="1">
        <top-tabs-table-one ref="topTabsTableOne" :tab-list="tabListObj.tab1" />
      </el-tab-pane>
      <el-tab-pane label="加工中任务" name="2">
        <top-tabs-table-two ref="topTabsTableTwo" :tab-list="tabListObj.tab2" />
      </el-tab-pane>
      <el-tab-pane label="待加工任务" name="3">
        <top-tabs-table-three ref="topTabsTableThree" :tab-list="tabListObj.tab3" />
      </el-tab-pane>
      <el-tab-pane label="最近完成任务" name="4">
        <top-tabs-table-four ref="topTabsTableFour" :tab-list="tabListObj.tab4" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import topTabsTableOne from './tabs/topTabsTableOne'
import topTabsTableTwo from './tabs/topTabsTableTwo'
import topTabsTableThree from './tabs/topTabsTableThree'
import topTabsTableFour from './tabs/topTabsTableFour'
export default {
  components: {
    topTabsTableOne,
    topTabsTableTwo,
    topTabsTableThree,
    topTabsTableFour
  },
  props: {},
  data() {
    return {
      activeName: '1',
      interval: null,
      tabListObj: {}
    }
  },
  watch: {},
  mounted() {
    // this.startAutoPlay()
  },
  beforeDestroy() {
    this.stopAutoPlay()
  },
  methods: {
    handleTabClick(tab, event) {
      this.stopAutoPlay()
      this.startAutoPlay()
    },
    async getTabInfo() {
      const res = await this.$axios.get('/board/pro/monitor/proTask')
      if (res?.data.code === 200) {
        // setTimeout(() => {
        this.tabListObj = res.data.data
        this.startAutoPlay()
        // }, 500)
      }
    },
    startAutoPlay() {
      this.stopAutoPlay()
      let arr = []
      this.$refs.mytabs.$children.forEach((item) => {
        if (item.index) {
          arr.push(item)
        }
      })
      this.interval = setInterval(() => {
        setTimeout(() => {
          const currentIndex = arr.findIndex(
            (tab) => tab.name === this.activeName
          )
          let nextIndex = currentIndex + 1
          if (nextIndex >= arr.length) {
            nextIndex = 0
          }
          this.activeName = arr[nextIndex].name
        })
      }, 6000) // 60000 毫秒/分钟 * 1 分钟
    },
    stopAutoPlay() {
      if (this.interval) {
        clearInterval(this.interval)
        this.interval = null
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.tabsBox {
  height: calc(100% - 45px);
}
</style>
<style lang='scss'>
/* 上部分右边tabs样式 */
.contentTopRight {
  position: relative;
  .el-tabs__header {
    position: absolute;
    top: 22px;
    width: 550px;
    right: 35px;
    .el-tabs__item {
      width: 25%;
    }
  }
}
</style>
